<template>
<div class="announcement-popup">
  <Modal class="pop" class-name="vertical-center-modal" v-model="showPop" width="520" :footer-hide="true">
    <announcement-content v-if="currentNoticeInfo" @change="showPop = false" :info="currentNoticeInfo"></announcement-content>
  </Modal>
</div>
</template>

<script>
import {contentList} from "@/api/content";
import AnnouncementContent from "./announcement-content";
import {mapState} from "vuex";
export default {
  name: "announcement-popup",
  components: {AnnouncementContent},
  data() {
    return {
      currentNoticeInfo: '',
      showPop: false // 是否显示公告弹窗
    }
  },
  computed: {
    ...mapState({
      config: state => state.config.config,
      noticeList: (state) => {
        // 活动公告
        let list = [];
        if (state.config.config) {
          if (state.config.config.groupArticleListMap) {
            list = state.config.config.groupArticleListMap.CFG_GROUP_ANNOUCEMENT;
          }
        }
        return list;
      }
    })
  },
  watch: {
    noticeList() {
     this.showNotice();
    }
  },
  methods: {
    showNotice() {
      let id = localStorage.getItem('notice_id');
      if (id) {
        if (this.noticeList && this.noticeList.length > 0) {
          if(this.noticeList[0].id != id) {
            this.currentNoticeInfo = this.noticeList[0];
            this.showPop = true;
            localStorage.setItem('notice_id',  this.currentNoticeInfo.id);
          }
        }
      } else {
        if (this.noticeList && this.noticeList.length > 0 ) {
          this.currentNoticeInfo = this.noticeList[0];
          this.showPop = true;
          localStorage.setItem('notice_id',  this.currentNoticeInfo.id);
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.pop {
   :deep(.ivu-modal-body) {
     padding: 0;
   }
}
</style>